<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>小说搜搜-免费且无广告的小说阅读网</title>

<!-- 使用网站图标：一般站长的做法，就是将网站图标文件favicon.ico放到网站根目录，就不管了。
其实，为了更好的兼容性，正确的做法应该是在header添加如下的META申明： -->
<link rel="icon" href="/icon/favicon-2017080708144388.ico">
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
<script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!-- Base64是一种基于64个可打印字符来表示二进制数据的表示方法。
Base64常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据。包括MIME的email，email via MIME, 在XML中存储复杂数据。
Base64其实是一种简单的置换加密方式，但是BASE64的用处往往并不是为了防止信息泄露，而且为了方便传输，进过BASE64编码后的信息会比原始信息长，大概是4/3倍。 -->
<script src="/js/jquery.base64.js"></script>
</head>
<body>
	<div class="jumbotron">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="input-group">
						<input type="text" id="keyword" class="form-control" placeholder="可以输入书名，作者名，甚至可以是符合条件的URL...">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" id="btnSearch">小说搜搜</button>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container no-table-responsive">
		<table class="table table-striped table-bordered table-condensed table-hover">
			<thead>
				<tr style="text-align: center; font-style: 800;">
					<th>#</th>
					<td>书名</td>
					<td>作者</td>
					<td>最新章节</td>
					<td>状态</td>
					<td>平台</td>
				</tr>
			</thead>
			<tbody id="novelList">
			</tbody>
			<!-- <tfoot>
				<tr>
					<td colspan="5">
						<div class="btn-group" style="float: right;">
							<button type="button" class="btn btn-default" id="currentPage">第1/100页</button>
							<button type="button" class="btn btn-default" id="firstPage">首页</button>
							<button type="button" class="btn btn-default" id="previousPage">上一页</button>
							<button type="button" class="btn btn-default" id="nextPage">下一页</button>
							<button type="button" class="btn btn-default" id="lastPage">尾页</button>
							<button type="button" class="btn btn-default" id="gotoPage">跳转</button>
							<input type="text" class="form-control" id="gotopage_text"
								style="width: 80px; display: inline-block" placeholder="页码">
							<input type="hidden" id="hidetxt" value="" />
						</div>
					</td>
				</tr>
			</tfoot> -->
		</table>
	</div>

	<script>
		$(function() {
			$("#btnSearch").click(search);
		})
		function search() {
			var val = $("#keyword").val().trim();
			$.ajax({
				url : "./novelSearch",
				type : "post",
				dataType : "json",
				data : {
					"keyword" : val,
				},
				error : function(data) {
					//输出报错对象的状态：400,404,500等
					alert(data.status);
				},
				success : function(result) {
					console.log(result.status);
					console.log("success");
					//先清空表格
					$("#novelList").html("");
					//再拼接表格
					var list=$(result.successData);
					//Object[Object { id=1008, name="欧皇的世界穿越之旅", author="楚韵依然", 更多...}, Object { id=1267, name="时空之穿越者", author="新人上路", 更多...}] 
					console.log(list);
					list.each(
							function(index, novel) {
								console.log("foreach");
								//console.log(novel);
								//这里的$tr和$("html")是什么含义，为什么不直接写成tr和"html"
								//这是jquery的用法$("标签")，相当于创建一个标签，然后再append拼接到标签里面
								//这种写法表示jquery对象，使用jquery的方法对应参数要是jquery对象
								var $tr = $("<tr><td>" + (index + 1) + "</td><td><a href='./chapterList?url=" + novel.url + "'>" + novel.name + "</a></td><td>"
										+ novel.author + "</td><td>" + novel.lastUpdateChapter + "</td><td>" + (novel.status == 1 ? "连载" : "完结") + "</td><td>"
										+ getPlatform(novel.platformId) + "</td></tr>");
								//console.log($tr);
								$("#novelList").append($tr);
							});
				}
			});
		};
		//格式器
		function getPlatform(platformId) {
			if (platformId == 1) {
				return "顶点小说";
			} else if (platformId == 2) {
				return "笔趣阁";
			} else if (platformId == 3) {
				return "看书中";
			} else if (platformId == 4) {
				return "笔下文学";
			} else {
				return "未知";
			}
		}
		search();
	</script>
</body>
</html>